@extends('layouts/main')
@section('content')
    <style>
        .layui-body{overflow-x: scroll;}
        .error-tip{font-size: 16px;margin-top: 10px;margin-bottom: 10px;}
        .new-table-name{width: 250px;float: left;margin-right: 10px;}
        .new-comment{width: 250px;float: left;margin-right: 10px;}
    </style>
    <div style="padding: 15px;">
        @if($db_name)
            <input type="hidden" id="db_name_input" value="{{$db_name}}">
            <input type="hidden" id="table_name_input" value="{{$table_name}}">
            <button class="layui-btn layui-btn-danger" type="button"  onclick="dropTable('{{$table_name}}', '{{$db_name}}')">删除表</button><br>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    @if($tab=='record')
                        <li class="layui-this">浏览</li>
                    @else
                        <li><a href="/index/record?db_name={{$db_name}}&table_name={{$table_name}}">浏览</a></li>
                    @endif
                    @if($tab=='structure')
                        <li class="layui-this">结构</li>
                    @else
                        <li><a href="/index/structure?db_name={{$db_name}}&table_name={{$table_name}}">结构</a></li>
                    @endif
                    @if($tab=='operation')
                        <li class="layui-this">操作</li>
                    @else
                        <li><a href="/index/operation?db_name={{$db_name}}&table_name={{$table_name}}">操作</a></li>
                    @endif
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>
            <div class="error-tip"></div>
            
            <div class="layui-card">
              <div class="layui-card-header">修改表名称</div>
              <div class="layui-card-body">
                <input type="text" class="new-table-name layui-input" value="{{$table_name}}">
                <button class="layui-btn modify-name-btn">修改</button>
              </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">修改表注释</div>
                <div class="layui-card-body">
                    <input type="text" class="new-comment layui-input" value="{{$table_info['TABLE_COMMENT']}}">
                    <button class="layui-btn modify-table-comment">修改</button>
                </div>
            </div>

            <div class="layui-card">
              <div class="layui-card-header">清空数据表</div>
              <div class="layui-card-body">
                <button class="layui-btn layui-btn-danger empty-table-data">清空数据表</button>
              </div>
            </div>
            <div>
            </div>

        @else
            请在左侧选择一个数据库以查看该数据库下的表
        @endif
    </div>
    <script type="text/javascript" src="/js/index/structure.js"></script>
    <script>
        layui.use('element', function(){
            var element = layui.element;
        });
        layui.use('form', function() {
            var form = layui.form;
            form.render();
        });

        $('.modify-name-btn').on('click', function(){
            var db_name = $('#db_name_input').val();
            var table_name = $('#table_name_input').val();
            var new_name = $('.new-table-name').val();
            if (table_name == new_name) {
                layer.msg('名称未更改');
                return false;
            }
            if (new_name == '') {
                layer.msg('名称不能为空', {
                    icon: 5,
                    time: 2000,
                    anim: 6,
                    closeBtn: 1,
                });
                return false;
            }
            layer.confirm('确定将表：'+table_name+'修改成：'+new_name+'？', {
                title: '修改表名称确认',
                btn: ['我已确定','再想想'],
                icon: 7,
            }, function(){
                var postData = {
                    db_name: db_name,
                    table_name: table_name,
                    new_name: new_name,
                    _token: $('meta[name="csrf-token"]').attr('content'),
                };
                var res = sendAjaxRequest('POST', '/database/alterTableName', postData, false);
                if (res.status == 0) {
                    layer.msg('修改成功', {icon: 1})
                    gotoPage('/index/operation?db_name='+ db_name +'&table_name='+ new_name);
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000,
                        anim: 6,
                        closeBtn: 1,
                    });
                }
            }, function(){
                // 取消操作
            });
            
        })

        $('.empty-table-data').on('click', function(){
            var db_name = $('#db_name_input').val();
            var table_name = $('#table_name_input').val();
            layer.confirm('确定清空数据表：'+table_name+'的内容？（清空操作无法恢复，请谨慎操作！）', {
                title: '清空数据表确认',
                btn: ['我已确定','再想想'],
                icon: 7,
            }, function(){
                var postData = {
                    db_name: db_name,
                    table_name: table_name,
                    _token: $('meta[name="csrf-token"]').attr('content'),
                };
                var res = sendAjaxRequest('POST', '/database/emptyTableData', postData, false);
                if (res.status == 0) {
                    layer.msg('清空成功', {icon: 1});
                    reloadPage();
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000,
                        anim: 6,
                        closeBtn: 1,
                    });
                }
            }, function(){
                // 取消操作
            });
            
        })

        $('.modify-table-comment').on('click', function(){
            var db_name = $('#db_name_input').val();
            var table_name = $('#table_name_input').val();
            var new_comment = $('.new-comment').val();
            // layer.msg(new_comment);return false;

            layer.confirm('确定修改？', {
                title: '修改表注释确认',
                btn: ['我已确定','再想想'],
                icon: 7,
            }, function(){
                var postData = {
                    db_name: db_name,
                    table_name: table_name,
                    comment: new_comment,
                    _token: $('meta[name="csrf-token"]').attr('content'),
                };
                var res = sendAjaxRequest('POST', '/database/updateTableComment', postData, false);
                if (res.status == 0) {
                    layer.msg('修改成功', {icon: 1})
                    reloadPage();
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000,
                        anim: 6,
                        closeBtn: 1,
                    });
                }
            }, function(){
                // 取消操作
            });

        })


    </script>
@endsection